<template>
  <div id="detlist">
      <template v-for="(item,index) in perArr1">
          <router-link tag="div" class="list" :key="item.id" :to="`/play/${item.id}`">
          <!-- <div class="list" :key="item.id"> -->
            <!-- 序号 -->
            <div class="left">{{index+1}}</div>
            <!-- 右边 -->
          <div class="right">
            <!-- 内容 -->
            <div class="content">
                <p>{{item.name}}</p>
            <span>{{item.ar[0].name}}-{{item.al.name}} </span>
            </div>
            <!-- 播放 -->
          <i class="iconfont icon-bofang"></i>
          </div>
          </router-link>
          <!-- </div> -->
      </template>
  </div>
</template>

<script>
export default {
  props:["perArr1"]
}
</script>

<style lang="scss" scoped>
  #detlist{
    // display: flex;
    width: _vw(750);
    .list{
      display: flex;
      align-items: center;
      height: _vw(100);
      .left{
        width: _vw(80);
        text-align: center;
        color: #a9a9a9;
        font-size: _vw(40);
      }
      .right{
        font-size: _vw(32);
      width: _vw(670);
      height: _vw(100);
      border-bottom:1px solid #ebebeb ;
      display: flex;
      padding-right: _vw(20);
      justify-content: space-between;
      align-items: center;
      .content{
        span{
          font-size: _vw(20);
          color: #7e828b;
        }
      }
      i{
        color: #a9a9a9;
        font-size: _vw(45);
      }
    }
    }
    

  }
</style>